<template>
    <div style="flex-direction: column; background-color: white;">
        <slider class="slider" interval="4500" auto-play="true" @change="onchange">
            <div class="banner" v-for="data in banners" v-bind:key="data.link">
                <image style="width: 750px;height: 280px" :src="data.img" alt=""></image>
                <div class="banner-title">
                    <text class="p">{{data.title}}</text>
                </div>
            </div>
            <indicator class="indicator"></indicator>
        </slider>
        <div class="list">
            <list>
                <cell class="cell" v-for="item in news" @click="jump('/info/'+item.id)" v-bind:key="item.id">
                    <div class="text">
                        <div class="info">
                            <text class="nr">{{item.title}}</text>
                            <text class="time">{{item.time}}</text>
                        </div>
                        <div class="bt">
                            <div class="bt-cont">
                                <div style="flex: 1;height: 28px;">
                                    <image style="width: 32px;height: 28px;position: absolute;right:10px" src="http://121.42.150.64:8099/resource/img/msg.png"></image>
                                </div>
                                <text class="msg">评论</text>
                            </div>
                            <div class="bt-cont">
                                <div style="flex: 1;height: 28px;">
                                    <image style="width: 32px;height: 28px;position: absolute;right:0" src="http://121.42.150.64:8099/resource/img/share.png"></image>
                                </div>
                                <text class="share"> 分享</text>
                            </div>
                        </div>
                    </div>
                    <div class="img">
                        <image style="width: 250px;height: 240px;border-radius: 6px;" :src="item.titleImg" alt=""></image>
                    </div>
                </cell>
                <loading v-if="!isnomore" class="height50 loading-view" :display="loading_display" @loading="onloading">
                    <text class="font12" v-if="(loading_display==='hide')">↑ 加载更多</text>
                    <loading-indicator class="loading-indicator"></loading-indicator>
                </loading>
            </list>
        </div>
        <div class="tab-bar">
            <text :class="[selectedType==type.id?'tab-btn-active':'tab-btn']" v-for="type in newsType" @click="switchNews(type.id)" v-bind:key="type.id">{{type.label}}</text>
        </div>
        <AppHeader :title="headerTitle" :showBack="false" :showTitle="false" :showLogo="true" :showPhoto="true"></AppHeader>
    </div>
</template>

<script>
    import AppHeader from '../../components/AppHeader.vue'
    import mixins from '../../mixins'
    const modal = weex.requireModule('modal')
    
    export default {
        components: {
            AppHeader
        },
        mixins: [mixins],
        data() {
            return {
                headerTitle: "继光生涯",
                showBack: false,
                newsType: [],
                banners: [],
                news: [],
                showLoading: 'hide',
                selectedType: 1,
                loading_display: 'hide',
                isnomore: false,
            }
        },
        created() {
            let self = this;
            self.getPageData();
        },
        methods: {
            onloading: function(e) {
                //加载更多
                if (this.isnomore) {
                    console.log('noMore!!');
                    return;
                }
                var self = this;
                self.loading_display = 'show';
            },
            onchange: function() {
    
            },
            switchNews(type) {
                modal.toast({
                    message: '加载中...',
                    duration: 0.5
                })
                let self = this;
                console.log("加载findNewsListByType....");
                self.request({
                    type: "post",
                    url: "/findNewsListByType",
                    data: {
                        "type": type,
                        "access_token": self.accessToken
                    }
                }).then(res => {
                    if (res.status == 1) {
                        self.selectedType = type;
                        self.news = res.data.news;
                    }
                });
            },
            getPageData() {
                let self = this;
                console.log("加载首页....");
                self.request({
                    url: "/index",
                    data: {
                        "access_token": self.accessToken
                    }
                }).then(res => {
                    if (res.status == 1) {
                        self.banners = res.data.banners;
                        self.news = res.data.news;
                        self.newsType = res.data.newsType;
                    }
                });
            },
            loadMoreList(event) {
    
            }
        }
    }
</script>

<style scoped>
    .tab-bar {
        background-color: #fff;
        padding-left: 10px;
        padding-right: 10px;
        flex-direction: row;
        position: fixed;
        top: 88px;
        height: 70px;
    }
    
    .tab-btn {
        color: #2e2e2e;
        font-size: 28px;
        padding-top: 22px;
        height: 68px;
        width: 148px;
        text-align: center;
        border-bottom-width: 0;
        border-bottom-style: none;
    }
    
    .tab-btn-active {
        font-size: 28px;
        padding-top: 22px;
        height: 70px;
        width: 148px;
        text-align: center;
        border-bottom-style: solid;
        border-bottom-width: 2px;
        border-bottom-color: #42b7ff;
        color: #42b7ff;
    }
    
    .user img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
    
    .list {
        height: 1276px;
        padding-bottom: 90px;
        margin-bottom: 90px;
    }
    
    .cell {
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 30px;
        padding-right: 30px;
        height: 280px;
        background: #fff;
        justify-content: space-between;
        flex-direction: row;
        border-bottom-color: #ddd;
        border-bottom-style: solid;
        border-bottom-width: 1px;
    }
    
    .nr {
        height: 90px;
        overflow: hidden;
        flex: 1;
        font-size: 26px;
        line-height: 40px;
        width: 390px;
        margin-top: 28px;
    }
    
    .img {
        width: 250px;
    }
    
    .text {
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        width: 440px;
        height: 220px;
    }
    
    .info {
        flex: 1;
    }
    
    .img {
        flex: 1;
        height: 240px;
    }
    
    .time {
        color: #999;
        font-size: 24px;
    }
    
    .msg {
        font-size: 24px;
        color: #999;
        text-align: left;
        border-right: 1px solid #999;
        flex: 1;
    }
    
    .share {
        font-size: 24px;
        color: #999;
        text-align: left;
        flex: 1;
    }
    
    .bt {
        flex-direction: row;
        margin-top: 40px;
        width: 400px;
    }
    
    .bt-cont {
        text-align: center;
        flex: 1;
        flex-direction: row;
    }
    
    .buttons-tab {
        flex-direction: row;
        flex-wrap: nowrap;
        background: white;
        position: fixed;
        top: 88px;
        left: 0;
        right: 0;
        height: 68px;
    }
    
    .banner-title {
        width: 750px;
        position: absolute;
        bottom: 0;
        background-color: rgba(0, 0, 0, .2);
        overflow: hidden;
    }
    
    .p {
        color: #fff;
        display: block;
        padding: 16px;
        font-size: 26px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .banner {
        width: 750px;
        height: 280px;
    }
    
    .slider {
        margin-left: 0;
        width: 750px;
        height: 280px;
        margin-top: 150px;
        position: relative;
    }
    
    .indicator {
        width: 750px;
        height: 280px;
        item-color: #ffffff;
        item-selected-color: #42b7ff;
        item-size: 10px;
        position: absolute;
        top: 112px;
        left: 280px;
    }
    
    .loading-view {
        width: 750;
        height: 100;
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        align-items: center;
    }
    
    .height50 {
        height: 105px;
    }
    
    .font12 {
        font-size: 25px;
    }
    
    .loading-indicator {
        height: 63px;
        width: 63px;
        color: #889967;
    }
</style>